<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BScroll的基本使用</title>
  <style>
    .content {
      height: 250px;
      background-color: aquamarine;

      overflow: hidden;
    }
  </style>
</head>
<body>
  <!-- BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。 -->

  <!-- 最外层标签只能包含一个标签，有多个标签时只有第一个标签有滚动效果；被包含的标签里可以有任意多的标签 -->
  <div class="content">
    <ul>
      <button class="btn">按钮</button>
      <li>列表数据1</li>
      <li>列表数据2</li>
      <li>列表数据3</li>
      <li>列表数据4</li>
      <li>列表数据5</li>
      <li>列表数据6</li>
      <li>列表数据7</li>
      <li>列表数据8</li>
      <li>列表数据9</li>
      <li>列表数据10</li>
      <li>列表数据11</li>
      <li>列表数据12</li>
      <li>列表数据13</li>
      <li>列表数据14</li>
      <li>列表数据15</li>
      <li>列表数据16</li>
      <li>列表数据17</li>
      <li>列表数据18</li>
      <li>列表数据19</li>
      <li>列表数据20</li>
      <li>列表数据21</li>
      <li>列表数据22</li>
      <li>列表数据23</li>
      <li>列表数据24</li>
      <li>列表数据25</li>
      <li>列表数据26</li>
      <li>列表数据27</li>
      <li>列表数据28</li>
      <li>列表数据29</li>
      <li>列表数据30</li>
      <li>列表数据31</li>
      <li>列表数据32</li>
      <li>列表数据33</li>
      <li>列表数据34</li>
      <li>列表数据35</li>
      <li>列表数据36</li>
      <li>列表数据37</li>
      <li>列表数据38</li>
      <li>列表数据39</li>
      <li>列表数据40</li>
      <li>列表数据41</li>
      <li>列表数据42</li>
      <li>列表数据43</li>
      <li>列表数据44</li>
      <li>列表数据45</li>
      <li>列表数据46</li>
      <li>列表数据47</li>
      <li>列表数据48</li>
      <li>列表数据49</li>
      <li>列表数据50</li>
    </ul>
  </div>
  
  <script src="./bscroll.js"></script>
  <script>
    // 默认情况下BScroll是不可以实时的监听滚动位置
    // probeType的值：0,1都是不侦测实时的位置
    // 2:在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测.
    // 3:只要是滚动（包括手指离开后的惯性滚动过程），都侦测。
    const bscroll = new BScroll('.content', { //BetterScroll 提供了一个类，实例化的第一个参数是就是要滚动的DOM对象。
      probeType: 2,
      click: true, //设置在滚动的DOM对象内是否能监听的点击
      pullUpLoad: true //设置上拉加载更多
    }) 

    bscroll.on('scroll', position => { //监听第一个参数为事件（查文档），第二个参数为回调函数
      // console.log(position);
    })

    bscroll.on('pullingUp', () => {
      console.log('上拉加载更多');
      //发送网络请求，请求更多页的数据

      //等数据请求完成，并且将新的数据展示出来后调用finishPullUp()，再次上拉才会打印
      setTimeout(() => {
        bscroll.finishPullUp()
      }, 2000)
    })

    document.querySelector('.btn').addEventListener('click', () => {
      console.log('--------');
    })
  </script>
</body>
</html>